/* 初始化样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none !important;
}

/* 定义CSS变量 */
:root {
  /* 颜色 */
  --color-white: #ffffff;
  --bg-main-color: #f8f8f8;
  --bg-color: #f5f5ff;
  --border-color-light: #f1f2f3;
  --color-primary-lighter: #ecf5ff;
  --color-success-lighter: #f0f9eb;
  --color-warning-lighter: #fdf6ec;
  --color-danger-lighter: #fef0f0;
  --color-dark-hover: rgba(0, 0, 0, 0.1);
  --color-menu-hover: rgba(0, 0, 0, 0.2);
  --color-user-hover: rgba(0, 0, 0, 0.04);
  --color-setting-main: #e9eef3;
  --color-setting-aside: #d3dce6;
  --color-setting-header: #b3c0d1;

  /* 字体 */
  --font-family:
    'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', SimSun, sans-serif;

  /* 其他 */
  --font-size-base: 14px;
}

/* 应用全局样式 */
html,
body,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: var(--font-family);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--bg-main-color);
  font-size: var(--font-size-base);
  overflow: hidden;
  position: relative;
}

/* 通用元素样式 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 移除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 链接样式 */
a {
  color: inherit;
  text-decoration: none;
}

/* 按钮和输入框的基础样式 */
button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
}

/* 避免表单元素继承字体样式 */
button::-moz-focusring,
input::-moz-focusring {
  outline: 1px dotted ButtonText;
}

/* 其他通用样式 */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: inherit;
}

p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* 响应式设计基础 */
@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }
}

.sheet {
  margin-top: 20px;
}
